<script setup >
import {ref,defineEmits} from 'vue'
import {useRouter} from 'vue-router'
const props = defineProps({
  firlevel: {
    type: Array,
  },
  seclevel: {
    type: Array,
  },
  category:{
    type:Array
  }
});

const router=useRouter()
const emit=defineEmits(['choice'])
const activeButtonIndices = ref([]); 

const send=()=>{
  emit('choice',{state:false,info:activeButtonIndices.value})
}

const joinCate=(ele)=>{


if (activeButtonIndices.value.includes(ele._id)) {
    activeButtonIndices.value = activeButtonIndices.value.filter((i) => i !== ele._id);
  } else {
    activeButtonIndices.value.push(ele._id);
  }
}

</script>

<template>
  <div id="app">
    <div>
      <van-nav-bar left-arrow @click-left="send"/>
    </div>
     <div>
      <h6> 请选择你想探索的课程分类</h6>
      <h6> 请至少选择一个感兴趣的分类</h6>
    </div>
    <div class="op" v-for="(item, index) in props.category" :key="index">
      <p>{{ item.title }}</p>
      <van-button     v-for="(ele, index) in item.children" :key="index" round type="default" size="small" @click="joinCate(ele)"
      :class="{ active: activeButtonIndices.includes(ele._id) }"
      >{{ ele.title }}</van-button>
    </div>
    <van-button class="footbtn" type="primary" @click="send">选好了</van-button>

  </div>
</template>


<style scoped lang="scss">
$size: 0.5rem;
#app{
  width: 100%;
  height: 100%;
  background-color: rgb(255, 255, 255);
}
.op{
  margin: 20px 0px;
  p{
    font-size: $size;
  }
  .active {
  /* 添加您想要的激活样式，例如更改背景色、文字颜色等 */
  background-color: #f5f5f5;
  color: #007aff;
}
}

.footbtn{
  // position: absolute;
  bottom: 10px;
  width: 90%;
  border-radius: 12px;
}
</style>

